<template>
	<div>
		<h1>{{ state.age }}</h1>
		<h1>{{ state.name }}</h1>
		<button @click="state.age++">age++</button>
		<h2>{{ money }}</h2>
		<button @click="money++">money++</button>
		<button @click="changeMoney">money++</button>
		<h1>{{ list }}</h1>
	</div>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
	name: 'App',

	setup() {
		const list = ref([1, 2, 3])
		const money = ref(100)
		const state = reactive({
			age: 18,
			name: 'thomas',
		})
		function changeMoney() {
			money.value++
		}
		return {
			state,
			money,
			changeMoney,
			list,
		}
	},
}
</script>
